<template>
  <!-- 合同管理 -->
  <a-drawer
    :closable="false"
    :title="title"
    :visible="visible"
    :width="800"
    placement="right"
    @close="close"
  >
    <a-spin :spinning="confirmLoading">
      <h2>合同信息</h2>
      <!-- {{ model.paymentMethodJson }} -->
      <div>档案号： {{ model.fileNumber }}</div>
      <div>订单号： {{ model.orderNumber }}</div>
      <div>合同号： {{ model.contractNo }}</div>
      <div>合同类型： {{ model.sellingType == '1' ? '个人零售' : '批售' }}</div>
      <div>合同签订日期： {{ model.contractSignTime | filterTime(model.contractSignTime) }}</div>
      <br/>

      <h2>卖方信息</h2>
      <div>企业名称：{{ model.enterpriseName }}</div>
      <div>销售区域：{{ model.region }}</div>
      <div>销售地址：{{ model.businessAddress }}</div>
      <div>销售顾问：{{ model.salesName }}</div>
      <div>手机号码： {{ model.salesPhone }}</div>
      <br/>

      <h2>购买方信息(与"机动车销售统一发票"信息一致)</h2>
      <div>购车人姓名： {{ model.buyerName }}</div>
      <div v-if="model.pinType == 1">证件类型：身份证</div>
      <div v-if="model.pinType == 2">证件类型：护照</div>
      <div v-if="model.pinType == 3">证件类型：士兵证军官证</div>
      <div v-if="model.pinType == 4">证件类型：港澳居民居住证</div>
      <div v-if="model.pinType == 5">证件类型：:港澳居民来往内地通行证</div>
      <div v-if="model.pinType == 6">证件类型：台湾居民居住证</div>
      <div v-if="model.pinType == 7">证件类型：台湾居民来往大陆通行证</div>
      <div v-if="model.pinType == 8">证件类型：外国人永久居留身份证</div>
      <div v-if="model.pinType == 9">证件类型：其他有效身份证明</div>
      <div>证件号码： {{ model.pinNumber }}</div>
      <div>手机号码：{{ model.buyerPhone }}</div>
      <br/>

      <h2>车辆信息</h2>
      <div>品牌：{{ model.carBrand }}</div>
      <template>
        <div v-if="model.carType == 1">车辆类型： 传统车</div>
        <div v-else-if="model.carType == 2">车辆类型： 新能源汽车</div>
        <div v-else>车辆类型：{{ model.carType }}</div>
      </template>
      <div>燃料类型： {{ model.fuelType | filterFuelType(model.fuelType) }}</div>
      <div>外饰颜色：{{ model.carColor }}</div>
      <div>内饰颜色：{{ model.interiorColor }}</div>
      <div>车架号(vin码)：{{ model.carVin }}</div>
      <div>发动机号：{{ model.engineNumber }}</div>
      <div>动力蓄电池组编号：{{ model.batteryNumber }}</div>
      <div>合格证号：{{ model.qualifiedNumber }}</div>
      <div>货物进口证明书编号：{{ model.importProveNumber }}</div>
      <div>进口机动车辆随车检验单号：{{ model.importEngineNumber }}</div>
      <div>充电条件落实方式：{{ model.chargeCondition == 1 ? '自建' : model.chargeCondition == 2 ? '专用' : '公用' }}</div>
      <br/>

      <h2>交易信息</h2>
      <div>总价：{{ model.finalPrice | filterNumber(model.finalPrice) }}</div>
      <div>付款类型：{{ model.paytype == '1' ? '按揭' : '一次性付款' }}</div>
      <div v-for="(item, index) in model.paymentMethodJson" :key="index">
        <span>支付方式：{{ item.paymentMethod | filterPaymentMethod }}；&nbsp;&nbsp;&nbsp;</span>
        <span>金额：{{ item.paymentAmount | filterPaymentAmount }}；&nbsp;&nbsp;&nbsp;</span>
        <span>付款时间：{{ item.paymentDate | filterPaymentDate }}</span>
      </div>
      <br/>

      <div v-if="isShowTradeInfo">
        <h2>交易信息("机动车销售统一发票"信息)</h2>
        <div v-if="model.invoiceTime">开票日期：{{ model.invoiceTime | filterTime(model.invoiceTime) }}</div>
        <div v-if="model.invoiceCode">发票代码：{{ model.invoiceCode }}</div>
        <div v-if="model.invoiceNumber">发票号码： {{ model.invoiceNumber }}</div>
        <div v-if="model.excludingTaxPrice">不含税价： {{ model.excludingTaxPrice | filterNumber(model.excludingTaxPrice) }}</div>
        <div v-if="model.invoicePrice">价税合计： {{ model.invoicePrice | filterNumber(model.invoicePrice) }}</div>
        <br/>
      </div>

      <h2>预交付信息</h2>
      <div>交付方式： {{ model.deliveryMethod == '1' ? '自提' : '委托' }}</div>
      <div>预定交车地点：{{ model.deliveryAddr }}</div>
      <div>预定交车时间：{{ model.deliveryTime }}</div>
      <br/>
      <h2 v-if="model.agentOrNot == '是'">代办服务</h2>
      <div v-if="model.agentOrNot == '是'">{{ model.agentContents }}</div>

      <h2>代办服务</h2>
      <div v-if="model.agentOrNot == 1">
        <div v-for="value in JSON.parse(model.agentContentsJson)">
          代办项目内容：{{ value.agentContent }}
          <span v-if="value.remarks">备注：{{ value.remarks }}</span>
        </div>
      </div>
      <div v-else>无</div>
      <br/>

      <h2>异议内容</h2>
      <div v-for="(value,key) in findWqnrList" :key="key">
        <div v-if="value.userType == '1'">异议提出日期：{{ value.createTime }}</div>
        <div v-else>
          <b>企业回复日期：{{ value.createTime }}</b>
        </div>
        <div v-for="(value2,key2) in JSON.parse(value.jsonName)" :key="key2">
          <span>{{ value2.title }}:</span>
          <span>{{ value2.info }}</span>
        </div>
        <div v-if="value.userType == '1'">备注：{{ value.contents }}</div>
        <div v-else>
          <b>企业回复内容：{{ value.contents }}</b>
        </div>
        <br/>
        <br/>
      </div>

      <a-form :form="form">
        <div v-if="model.confirmStatus == 3" style="margin-top: 10px">
          <a-textarea
            v-model="objectionContents"
            v-decorator="['objectionContents', { rules: [{ required: true, message: '请回复用户提出合同异议内容' }] }]"
            placeholder="请回复用户提出合同异议内容"
            style="width: 80%"
          />
        </div>
      </a-form>
      <br/>
      <div v-if="model.confirmStatus == 2">
        <h2>购买方签名确认信息</h2>
        <div>
          签名：
          <img :src="model.confirmedName" alt style="width: 70px; height: 40px"/>
        </div>
        <div>确认日期：{{ model.confirmedTime }}</div>
      </div>
    </a-spin>
    <br/>
    <a-button v-if="model.confirmStatus == 3" type="primary" @click="handleSubmit">提交</a-button>

    <a-button type="primary" @click="handleCancel">返回</a-button>
  </a-drawer>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import { getContractManagerInfo } from '@/api/api'
import moment from 'moment'
import Template1 from '../../jeecg/JVxeDemo/layout-demo/Template1.vue'

export default {
  components: { Template1 },
  name: 'CxmContractManagerModal',
  data() {
    return {
      isShowTradeInfo: true,
      title: '合同管理',
      visible: false,
      model: {},
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmContractManager/add',
        edit: '/cxm/cxmContractManager/edit',
        findWqnrList: '/cxm/cxmWqnrLog/public/findWqnrList'
      },
      showFindWqnrList: false,
      findWqnrList: [],
      objectionContents: ''
    }
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('close')
      this.visible = false
      this.showFindWqnrList = false
      this.isShowTradeInfo = true
    },
    handleCancel() {
      this.close()
    },
    showDrawer(record) {
      console.log(record)
      if (!record.invoiceTime && !record.invoiceCode && !record.invoiceNumber && !record.excludingTaxPrice && !record.invoicePrice) {
        this.isShowTradeInfo = false
      }
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.model.paymentMethodJson = JSON.parse(this.model.paymentMethodJson)
      console.log(this.model.paymentMethodJson, '1')
      let params = {
        id: this.model.id
      }
      getContractManagerInfo(params).then((res) => {
        this.model = res.result
        this.model.paymentMethodJson = JSON.parse(this.model.paymentMethodJson)
        console.log(this.model.paymentMethodJson, '2')
        if (this.model.paymentMethodJson) {
          for (let i = 0; i < this.model.paymentMethodJson.length; i++) {
            this.model.paymentMethodJson[i].paymentAmount = Number(this.model.paymentMethodJson[i].paymentAmount).toFixed(2)
          }
        }
      })
      this.visible = true
      let params2 = {
        wqId: this.model.id,
        wqType: '2',
        paixu: 'asc'
      }
      getAction(this.url.findWqnrList, params2).then((res) => {
        console.log(res)
        if (res.success) {
          console.log(this.showFindWqnrList)
          this.showFindWqnrList = true
          console.log(res.result)
          this.findWqnrList = res.result
        }
      })
    },
    handleSubmit(record) {
      const that = this
      let method = 'put'
      let formData = {
        id: that.model.id,
        objectionContents: that.objectionContents,
        confirmStatus: 4
      }
      console.log(that.model.objectionContents)
      httpAction(this.url.edit, formData, method)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
            location.reload()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
      this.visible = false
    }
  },
  filters: {
    filterTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    filterPaymentMethod(paymentMethod) {
      switch (paymentMethod) {
        case '1':
          return '刷卡'
        case '2':
          return '转账'
        case '3':
          return '支票'
        case '4':
          return '现金'
        case '5':
          return '微信'
        case '6':
          return '支付宝'
        case '7':
          return '银行承兑汇票'
        case '8':
          return '预付'
        case '9':
          return '本票'
        case '10':
          return '会员电子账户'
        case '11':
          return '门店储值卡'
        case '13':
          return '券支付'
        case '14':
          return '电汇'
        case '15':
          return '挂账'
        case '16':
          return '公户'
        default:
          return paymentMethod
      }
    },
    filterPaymentAmount(paymentMethod) {
      return paymentMethod + '元'
    },
    filterPaymentDate(paymentDate) {
      return new Date(new Date(paymentDate).getTime()).toLocaleString()
    },
    filterNumber(value) {
      return Number(value).toFixed(2) + '元'
    },
    filterFuelType(value) {
      switch (Number(value)) {
        case 1:
          return '油/电'
        case 2:
          return '电'
        case 3:
          return '汽油'
        default:
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 30px;
  margin-bottom: 30px;
  float: right;
}
</style>
